<template>
  <div class="setting-show-cmp-box">
    <draggable class="icon-list-box flex-x flex-w al-start" handle=".can-move" :value="dataInfo" @input="changedDataInfoHandler">
      <div
        :class="['can-move', 'icon-list-item', nowId==item.id?'icon-list-item-check':'']"
        v-for="(item, index) in dataInfo"
        :key="index"
        draggable="true"
        @click="changeThis(item)"
      >
        <img :src="imgObj[`img_${item.iconType}`]" class="icon-list-item-img" />
        <div class="overHideCon-1 font-10">{{item.name}}</div>
      </div>

      <div class="cur-point icon-list-item" v-if="dataInfo.length < 8" @click="add_dataList">
        <div class="icon-list-item-add">
          <i class="iconfont icon-plus-circle-fill"></i>
        </div>
        <div class="overHideCon-1 font-10">新增入口</div>
      </div>
    </draggable>
  </div>
</template>
<script>
import draggable from 'vuedraggable';
import _ from 'lodash';
import { safeNewDate } from '@src/util/time';
import { getOssUrl } from '@src/util/assets'
const img_1 = getOssUrl('/myShop/icon1.png')
const img_2 = getOssUrl('/myShop/icon2.png')
const img_3 = getOssUrl('/myShop/icon3.png')
const img_4 = getOssUrl('/myShop/icon4.png')
const img_5 = getOssUrl('/myShop/icon5.png')
const img_6 = getOssUrl('/myShop/icon6.png')
const img_7 = getOssUrl('/myShop/icon7.png')
const img_8 = getOssUrl('/myShop/icon8.png')
const img_9 = getOssUrl('/myShop/icon9.png')
const img_10 = getOssUrl('/myShop/icon10.png')
const img_11 = getOssUrl('/myShop/icon11.png')
const img_12 = getOssUrl('/myShop/icon12.png')
const img_13 = getOssUrl('/myShop/icon13.png')
const img_14 = getOssUrl('/myShop/icon14.png')
const img_15 = getOssUrl('/myShop/icon15.png')
const img_16 = getOssUrl('/myShop/icon16.png')

export default {
  name: 'icon-list',
  props: ['infoData', 'cmpId', 'nowSettingDataId', 'eventList'],
  components: {
    draggable,
  },
  inject: ['cancelInfoData'],
  data() {
    return {
      dataInfo: this.infoData || [],
      imgObj: {
        img_1,
        img_2,
        img_3,
        img_4,
        img_5,
        img_6,
        img_7,
        img_8,
        img_9,
        img_10,
        img_11,
        img_12,
        img_13,
        img_14,
        img_15,
        img_16,
      },
      nowId: '',
    };
  },
  watch: {
    infoData: {
      deep: true,
      handler(value) {
        this.dataInfo = value;
      },
    },
    nowSettingDataId(value) {
      if (value == -1 || value != this.cmpId) {
        this.$set(this, 'nowId', '');
      }
    },
  },
  methods: {
    add_dataList() {
      let id_ = safeNewDate().getTime();
      let item = {
        iconType: '1',
        name: '快捷入口',
        type: '',
        id: id_,
        cmpId: this.cmpId,
        eventTempId: this.eventList.length > 0 ? this.eventList[0].id : '',
      };
      this.$emit('pushIcon', { id: this.cmpId, item });
      
      this.changeThis(item);
    },
    changeThis(item) {
      if (this.nowId == item.id) {
        this.cancelInfoData();
        return;
      }
      this.nowId = item.id;
      this.$emit('changeThis', { id: this.cmpId, item });
    },
    changedDataInfoHandler(value) {
      this.dataInfo = value
      this.$emit('change', value)
    }
  },
};
</script>
<style lang="scss" scoped>
.setting-show-cmp-box {
  width: 100%;
  .icon-list-box {
    padding: 32px 9.5px 13px;
    .icon-list-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 19px;
      width: 25%;
      box-sizing: border-box;
      min-height: 35px;
      .icon-list-item-img {
        margin-bottom: 6px;
        width: 38px;
        height: 29px;
      }
    }
    .icon-list-item-check {
      outline: 1px dashed $color-primary;
    }
    .icon-list-item-add {
      margin-bottom: 6px;
      width: 38px;
      height: 28px;
      background: #ccc;
      border-radius: 13px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
    }
  }
}
</style>